<template>
  <div>customRef的使用!</div>
  <input type="text" placeholder="请输入内容" v-model="keyWord">
  <h3>{{ keyWord }}</h3>
</template>

<script lang="ts">
import {customRef, defineComponent} from 'vue';


const useDebounceRef = (value: any, delay = 200) => {
  let timer
  // 创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，
  // 该函数接收 track 和 trigger 函数作为参数，并且应该返回一个带有 get 和 set 的对象。
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newV: any) {
        clearTimeout(timer)
        timer = setTimeout(() => {
          value = newV;
          trigger()
        }, delay)
      }
    }
  })
}
export default defineComponent({
  name: 'App',
  components: {},
  setup() {
    // const keyWord = ref('abc')
    const keyWord = useDebounceRef('abc', 500)
    return {
      keyWord
    }
  }
});
</script>

<style>

</style>
